<template>
  <div>
    <!-- 轮播图部分 -->
    <el-carousel :interval="2000" arrow="always" trigger="hover" height="500px">
      <el-carousel-item v-for="(item, index) in imageList" :key="index" class="carousel-item">
        <img :src="item.src" alt="轮播图" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>

    <!-- 动态列表部分，使用表格展示 -->
    <div class="list-container" style="margin-top: 20px">
      <div class="list-header">
      </div>


      <table border="1" style="width: 300px ;;; border-collapse: collapse" class="tb">
        <span class="cc">
          <span>序号</span>
        </span>

        <tr v-for="(item, index) in listItems" :key="index">
          <td style="padding: 10px; border: 2px solid #b70000">{{ item }}</td>
          <td style="padding: 5px; border: 2px solid #b70000">

            <el-button type="danger" size="mini" @click="removeItem(index)">删除</el-button>

          </td>
        </tr>

      </table>
      <el-input v-model="newItem" placeholder="请输入新项" @keyup.enter.native="addItem" class="inp">
      </el-input>
      <el-button type="primary" @click="addItem" class="add">添加</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      imageList: [
        { src: 'https://files.codelife.cc/wallpaper/wallspic/20231222b1gj51.jpeg?x-oss-process=image/resize,limit_0,m_fill,w_1024,h_980/quality,Q_92/format,webp' },
        { src: 'https://files.codelife.cc/wallhaven/full/v9/wallhaven-v9pqym.jpg?x-oss-process=image/resize,limit_0,m_fill,w_2560,h_1440/quality,Q_92/format,webp' },
        { src: 'https://files.codelife.cc/wallhaven/full/95/wallhaven-95j9pw.jpg?x-oss-process=image/resize,limit_0,m_fill,w_2560,h_1440/quality,Q_92/format,webp' },
      ],
      newItem: "",
      listItems: [],
    };
  },
  methods: {
    addItem() {
      if (this.newItem.trim() !== "") {
        this.listItems.push(this.newItem.trim());
        this.newItem = ""; // 清空输入框
      }
    },
    removeItem(index) {
      this.listItems.splice(index, 1);
    },
  },
};
</script>

<style scoped>
/* 轮播图样式 */
.carousel-item {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1000px;
}

.carousel-image {
  width: 100%;
  height: 100%;
}

/* 动态列表样式 */
.list-container {
  list-style-type: none;
  padding: 0;
}

.list-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.list-header span {
  font-weight: bold;
}

table {
  border: 1px solid #000;
}

table,
th,
td {
  border: 1px solid red;
}

th,
td {
  text-align: center;
  padding: 8px;
}
.list-container{
  text-align: center;
}
.tb{
  margin: 0 auto; 

}

.inp {
  width: 250px;
  border: 2px solid #000;
  border-radius: 10px;
  margin-top: 20px;
}

.add {
  margin: 0 auto;
  width: 80px;
  margin-top: 20px;
}

.cc {
  padding-left: 10px;
  text-align: center;
  line-height: 40px;
  height: 40px;
}

</style>
